<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>获取数据</button>
    <div class="box"></div>
    <div class="box2"></div>
    <script>
        // 1. 定义ajax函数
        // function ajax(url){
        //     // 1.1 返回new Promise()对象
        //     // 1.2 创建xhr对象
        //     // 1.3 open
        //     // 1.4 send
        //     // 1.5 事件监听
        //     return  new Promise((resolve,reject)=>{
        //         console.log("执行了promise");
        //         let x = new XMLHttpRequest();
        //         x.open('get',url);
        //         x.send();
        //         x.onreadystatechange = function(){
        //             if(x.readyState===4){
        //                 if(x.status>=200&&x.status<300){
        //                     resolve(x.response);
        //                 }else{
        //                     reject(x.statusText); //错误信息
        //                 }
        //             }
        //         }
        //     });
        // }


        function ajax(url,data,callback){
            // 1.1 返回new Promise()对象
            // 1.2 创建xhr对象
            // 1.3 open
            // 1.4 send
            // 1.5 事件监听
            return  new Promise((resolve,reject)=>{
                console.log("执行了promise");
                let x = new XMLHttpRequest();
                x.open('get',url);
                x.send();
                x.onreadystatechange = function(){
                    console.log(x.readyState); //2
                    if(x.readyState===4 ){
                        if(x.status>=200&&x.status<300){
                            resolve(x.response);
                            // callback(x.response);
                        }else{
                            reject(x.statusText); //错误信息
                        }  
                    }
                }
            });
        }
           
        
        // 2. 获取按钮
        let btn = document.querySelector('button');
        // 3. 添加点击事件
        btn.onclick = function(){
            let p = ajax('https://v1.hitokoto.cn');
            p.then((value)=>{
                // console.log(value);
                let div = document.querySelector('.box');
                div.innerHTML = value;
            },(reason)=>{
                console.log(reason);
            });

            let p2 = ajax('https://v1.hitokoto.cn');
            p2.then((value)=>{
                 // console.log(value);
                 let div = document.querySelector('.box2');
                div.innerHTML = value;
            })
            // 3.1 调用ajax方法
        //    let data = ajax('https://v1.hitokoto.cn/?c=a');
        //    console.log(data);
            // 3.2 调用then方法
        }
            


    
    </script>
</body>

</html>